<template>
    <notice :notice.sync="notice"></notice>
    <header-class action="testPapers"></header-class>
    
    <div class="loading-class" v-if="loading">
        <i class="fa fa-spinner fa-spin fa-3x"></i>
    </div>
    <div class="container" id="grade-container">
        <div class="col-md-10 col-md-offset-1 display-hint" v-if="papers.length==0&&!loading">
            <p>该班级暂时没有测试</p>
        </div>
        <div class="row" v-for="paper in papers" v-if="papers.length!=0&&!loading">
            <div class="col-md-10 col-md-offset-1" v-if="paper.qus_status!=0">
                <div class="panel panel-default quiz-box">
                    <div class="panel-body">
                        <div class="box-title">
                            <span class="text-muted">{{paper.qus_create_time}}</span>
                            <p class="pull-right text-primary">{{paper.commit}}</p>
                        </div>
                        <div class="box-body clearfix">
                            <div class="box-body-left pull-left">
                                <h4><a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id">{{paper.qus_name}}</a></h4>
                                <p>{{paper.qus_remark}}</p>
                            </div>
                            <div class="box-body-right pull-right">
                                <a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id" class="btn btn-success" 
                                   v-if="paper.commit=='未交'&&paper.qus_status==1">开始答题
                                </a>
                                <a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id" class="btn btn-primary" 
                                   v-if="paper.commit=='已完成'&&paper.qus_status==2">查看成绩
                                </a>
                                <a :href="'/TestPaper/testPaper.html?qd='+paper.qus_id" class="btn btn-default" 
                                   v-if="paper.commit=='已完成'&&paper.qus_status==1||paper.commit=='未交'&&paper.qus_status==2">查看试卷
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="!loading">
                <div class="col-md-3 col-md-offset-5">
                    <pagenation v-if="pageInfo.page>1"
                                :page-info="pageInfo"
                                @update-np="getPapes">
                    </pagenation>
                </div>
        </div>
    </div>
</template>

<script>
    import HeaderClass from '../../Component/HeaderClass/HeaderClass';
    import Pagenation from '../../Component/Pagenation/Pagenation';
    import Notice from '../../Component/Notice/Notice';
    import Modal from '../../Component/Modal/Modal';

    export default {
        created: function() {
            this.claId = location.search.substring(1).split("=")[1];
            this.getPapes();
        },
        data() {
            return {
                claId: -1,
                notice: {type: 0, msg: ""},
                loading: false,
                papers: [],
                pageInfo: {}
            }
        },
        components: {
            HeaderClass,
            Pagenation,
            Notice,
            Modal
        },
        methods: {
            getPapes: function(np) {
                this.loading = true;
                this.$http.post('/questionSet/quiz', {cla_id: this.claId, np: np||1}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.papers = resp.data.data.quiz;
                        this.pageInfo = resp.data.data.pageInfo;
                    }
                    this.loading = false;
                }, function(resp) {
                    // error callback
                    this.loading = false;
                    this.notice = {type: 0, msg: resp.statusText};
                })
            }
        }
    }
</script>

<style>
 .container {
    margin-bottom: 60px;
}

.release {
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ecf0f1;
    margin-bottom: 40px;
}

.release a{
    display: block;
    color: #808080;
    margin-left: 30px;
    cursor: text;
}

.release a:hover, 
.release a:focus {
    text-decoration: none;
}

#release-box .panel-body,
.edit-box .panel-body {
    padding: 20px 70px 0 0;
}

#release-box .panel-footer,
.edit-box .panel-footer {
    padding: 20px 60px;
}

#release-box .panel-footer .btn,
.edit-box .panel-footer .btn{
    margin-right: 10px;
}

.quiz-box {
    margin-bottom: 40px;
}

.quiz-box .panel-body{
    padding: 20px 30px 30px;
}

.quiz-box .box-title .dropdown-toggle{
    color: #808080;
    margin-left: 15px;
}

.quiz-box .box-title {
    padding: 0 10px 20px 0;
}

.quiz-box .box-body-left h4 {
    margin-bottom: 20px;
}

.quiz-box .box-body-left a{
    color: #202020;
}

.quiz-box .box-body-right .btn {
    margin-top: 10px;
}

.import-paper-modal .modal-body{
    padding: 20px 40px 0 40px;
}

.import-paper-modal .modal-body p, h4{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.import-paper-modal .other-panels {
    padding-top: 15px;
}

.import-paper-modal .modal-body {
    height: 310px;
    overflow-y: auto;
}

.import-paper-modal .panel .panel-heading {
    border: 1px solid transparent;
    min-height: 94px;
    cursor: pointer
}

.import-paper-modal .panel-heading:hover {
    color: #123456;
    opacity: 0.6;
}

.import-paper-modal .panel-heading span {
    position: absolute;
    top: 6px;
    right: 20px;
    display: none;
    margin-bottom: -5px;
}

.import-paper-modal .panel-heading:hover span {
    display: block;
}

.import-paper-modal .panel .panel-heading.active span {
    display: block;
    color: #18bc9c;
}

.import-paper-modal .panel .panel-heading.active {
    border-color: #18bc9c;
}
</style>